<template>
	<view class="pd30 bg-w">
		<view class="unicard-detail-banner">
			<image class="bdr16" :src="cardInfo.image"></image>
		</view>

		<view class="mt30 bg-w bdr16 pd40 box-shadow unicard-info">
			<view @click="showAlert = true" class="unicard-info-explain iconfont iconbtn_question"></view>
			<view class="unicard-info-content">
				<view class="flex alcenter">
					<text class="ft18 ftw600 text-default">{{cardInfo.title}}</text>
					<text class="tag-unicard-cat ml20">{{cardInfo.category}}</text>
				</view>
				<view class="mt40 flex alcenter">
					<view class="col3 text-center">
						<view class="ft18 ftw600 text-default">
							{{cardInfo.merchantCount}}个
						</view>
						<view class="ft14 text-info mt20">商户数</view>
					</view>
					<view class="col3 text-center bdlt">
						<view class="ft18 ftw600 text-default">
							{{cardInfo.couponCount}}张
						</view>
						<view class="ft14 text-info mt20">代金券</view>
					</view>
					<view class="col3 text-center bdlt">
						<view class="ft18 ftw600 text-default">
							永久有效
						</view>
						<view class="ft14 text-info mt20">有效期</view>
					</view>
				</view>
			</view>
		</view>
		<unio2o-unicard-role-tuan-alert @closed="showAlert = false" :show="showAlert"></unio2o-unicard-role-tuan-alert>
		<view class="mt50" v-for="(citem, cindex) in cardInfo.coupons" :key="cindex">
			<unio2o-unicard-detail-coupon :coupon="citem"></unio2o-unicard-detail-coupon>
		</view>
		<view class="mt50" v-for="(item, index) in cardInfo.products">
			<unio2o-unicard-detail-tuan :product="item"></unio2o-unicard-detail-tuan>
		</view>

		<view class="unicard-footer-h"></view>
		<view class="unicard-footer bg-w box-shadow-top flex space alcenter plr30">
			<view class="flex alcenter">
				<view class="text-theme">
					<text class="ft14">¥</text>
					<text class="ft24 ftw600">{{cardInfo.price}}</text>
				</view>
				<view class="ml20">
					<view class="unicard-save flex alcenter">
						<uni-icons type="gift" size="16" color="#fff"></uni-icons> 省{{cardInfo.price}}
					</view>
					<view class="text-notice ft14 mt10">
						有效期：{{cardInfo.validity}}
					</view>
				</view>
			</view>
			<navigator url="/pages/unicard/respond">
				<view class="unicard-detail-buy">立即开通</view>
			</navigator>
		</view>
	</view>
</template>

<script>
	import unio2oUnicardDetailTuan from '@/components/module/unicard/detail/tuan.vue';
	import unio2oUnicardDetailCoupon from '@/components/module/unicard/detail/coupon.vue';
	import unio2oUnicardRoleCouponAlert from '@/components/module/unicard/roleCoupon.vue';
	import unio2oUnicardRoleTuanAlert from '@/components/module/unicard/roleTuan.vue';
	export default {
		components: {
			unio2oUnicardDetailTuan,
			unio2oUnicardDetailCoupon,
			unio2oUnicardRoleCouponAlert,
			unio2oUnicardRoleTuanAlert
		},
		data() {
			return {
				showAlert: false,
				cardInfo: {
					id: "PK2025001",
					image: "https://picsum.photos/800/400?theme=kids&bg=FFF0F5&fg=FF6B81&text=亲子游乐卡", // 新增高清Banner图
					type: "套餐卡",
					title: "亲子游乐畅玩年卡", // 优化标题
					subtitle: "0-12岁儿童通用·周末节假日不加价", // 新增副标题
					price: 899, // 调整价格
					originalPrice: 3288, // 新增原价
					saveAmount: 2389, // 计算省金额
					validity: "1年",
					category: "亲子教育", // 分类优化
					description: "包含合肥5大亲子地标场馆，全年无限次畅玩+专属亲子活动优先参与权", // 详细描述
					features: [ // 核心权益列表
						"5家场馆通用",
						"免费参加每月主题活动",
						"生日当月赠1次额外体验",
						"家长陪同票免费",
						"过期未使用全额退款"
					],
					productCount: 20, // 总项目数
					merchantCount: 5, // 总商户数
					couponCount: 10, // 代金券数量
					useRules: [ // 使用规则
						"周末及节假日需提前1天预约",
						"单次体验时长不超过4小时",
						"不可转让，仅限本人使用"
					],
					recommendedReason: "合肥市教育局推荐·超10万家庭选择", // 推荐理由
					targetUser: "0-12岁儿童家庭", // 适用人群
					products: [ // 热门项目
						{
							id: 1001,
							title: "奇乐儿童乐园全天畅玩",
							discount: "无限次免费",
							image: 'https://picsum.photos/300/300?random=2',
							originalPrice: 198,
							store: {
								id: 1001,
								name: "奇乐儿童乐园(万象城旗舰店)",
								logo: "https://picsum.photos/150/150?kids=2",
								rating: 4.9,
								distance: "1.2km",
								address: "合肥市政务区万象城L3-88号",
								businessHours: "09:30-21:30",
								tags: ["室内恒温", "百万海洋球", "职业体验区"]
							}
						},
						{
							id: 1002,
							title: "金宝贝早教音乐启蒙课",
							discount: "免费体验8次",
							image: 'https://picsum.photos/300/300?random=1',
							originalPrice: 298,
							store: {
								id: 1002,
								name: "金宝贝早教(银泰中心店)",
								logo: "https://picsum.photos/150/150?kids=2",
								rating: 4.8,
								distance: "2.5km",
								address: "合肥市庐阳区银泰中心4楼",
								businessHours: "09:00-18:00",
								tags: ["双语教学", "感统训练", "亲子互动"]
							}
						},
						{
							id: 1003,
							title: "童画美术大师课",
							discount: "免费体验4次",
							image: 'https://picsum.photos/300/300?random=2',
							originalPrice: 168,
							store: {
								id: 1003,
								name: "童画美术教育(包河万达店)",
								logo: "https://picsum.photos/300/300?random=3",
								rating: 4.7,
								distance: "0.8km",
								address: "合肥市包河区万达金街2楼",
								businessHours: "10:00-20:00",
								tags: ["小班教学", "创意绘画", "陶艺体验"]
							}
						}
					],
					// 优惠券
					coupons: [{
							id: "C20250601",
							name: "满减券",
							discount: "免费体验4次",
							type: 1,
							price: 0,
							amount: 10,
							minAmount: 30,
							discountRate: null,
							maxDiscount: null,
							title: "每满80减20元券",
							description: "美食类通用",
							store: {
								id: 1001,
								logo: 'https://picsum.photos/100/100?random=1',
								name: '蜀大侠火锅',
								distance: '1.2km'
							}
						},
						{
							id: "C20250602",
							name: "折扣券",
							discount: "免费体验2次",
							type: 2,
							price: 0,
							amount: null,
							minAmount: 100,
							discountRate: 0.85,
							maxDiscount: 50,
							title: "全场85折券",
							description: "酒店类通用",
							store: {
								id: 2001,
								logo: 'https://picsum.photos/100/100?random=1',
								name: '城市豪华大酒店',
								distance: '1.2km'
							}
						}
					]
				}
			};
		}
	}
</script>

<style>
	.unicard-save {
		background: linear-gradient(90deg, rgba(255, 107, 130, 1) 0%, rgba(255, 139, 114, 1) 100%);
		height: 40rpx;
		padding: 0rpx 10rpx;
		border-radius: 20rpx;
		font-size: 24rpx;
		color: #FFFFFF;
	}

	.unicard-save image {
		width: 32rpx;
		height: 32rpx;
		margin-right: 8rpx;
	}

	.unicard-footer-h {
		height: calc(140rpx + env(safe-area-inset-bottom));
	}

	.unicard-footer {
		height: calc(140rpx + env(safe-area-inset-bottom));
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 0;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.unicard-detail-buy {
		width: 320rpx;
		height: 96rpx;
		background: linear-gradient(135deg, rgba(255, 143, 85, 1) 0%, rgba(255, 104, 92, 1) 100%);
		border-radius: 48rpx;
		text-align: center;
		line-height: 96rpx;
		font-weight: 600;
		font-size: 36rpx;
		color: #FFFFFF;
	}

	.tag-unicard-cat {
		padding: 4rpx 12rpx;
		border: 2rpx solid #CCCCCC;
		color: #999999;
		font-size: 24rpx;
		border-radius: 4rpx;
	}

	.unicard-detail-banner {
		height: 344rpx;
		width: 100%;
	}

	.unicard-detail-banner image {
		width: 100%;
		height: 344rpx;
	}

	.unicard-info {
		position: relative;
		overflow: hidden;
	}

	.unicard-info-img {
		width: 184rpx;
		height: 184rpx;
		position: absolute;
		right: 0;
		top: 0;
		z-index: 1;
	}

	.unicard-info-explain {
		font-size: 48rpx;
		position: absolute;
		right: 30rpx;
		top: 30rpx;
		z-index: 3;
		color: #FF6D00;
	}

	.unicard-info-content {
		position: relative;
		z-index: 2;
	}
</style>